<template>

	<div id="log">
		<div id="login-input">
			<br>
			<div>
				<img src="@/assets/logo.png" width="200px" alt="">
			</div>
			<br>
			<hr style="width: 90%;">
			<br>
			<el-input v-model="date.info.username" placeholder="用户名" clearable />
			<br>
			<el-input v-model="date.info.password" type="password" placeholder="密码" clearable />
			<br>
			<el-button type="success" size="default" @click="goLogin">登录</el-button>
			<div style="display: flex;">
				<el-button type="text" size="default" @click="">忘记密码</el-button>
				<el-button type="text" size="default" @click="registration">用户注册</el-button>
			</div>
		</div>
	</div>

</template>

<script setup>
	import store from '../store';
	import log from "../api/public/login.js"
	import {
		reactive
	} from 'vue';
	import router from '../router';

	const date = reactive({
		info: {
			username: '',
			password: ''
		}
	})

	const goLogin = () => {
		log.inn(date.info);
	}
	
	const registration = () => {
		if (window.localStorage.getItem("token")) {
			ElMessage.warning("警告：请退出当前账号后再注册！")
			return
		}
		router.push("/registration")
	}
</script>

<style lang="less">
	#log {
		width: 100%;
		height: 100vh;
		background-color: #F7F8FC;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		#login-input {
			background-color: white;
			width: 600px;
			border-radius: 20px;
			height: 350px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.el-input--suffix {
				width: 50%;
			}

			.el-button--default {
				width: 50%;
			}
		}
	}
</style>